<script lang="ts" setup>
import { House, ArrowRight, Discount, Grid } from "@element-plus/icons-vue";
import createAxios from "../request";
import { onMounted } from "vue";
import { PersonInfo } from "../model";
import { reactive } from "vue";
import userStore from "../store/UserStore";
import { ElMessage } from "element-plus";

let store = userStore();
let empno = store.getEmpno;

let axios = createAxios();

let list1: PersonInfo = {
  ename: "",
  email: "",
  dname: "",
  job_name: "",
  gender: -1,
  start_date: "",
  birthday: "",
  marriage: -1,
  work_date: "",
  deptHistory: [],
  jobHistory: [],
};
let tableData = reactive({
  list: list1,
});

const getData = function () {
  axios({
    url: `/getEmpInfo`,
    method: "GET",
    params: {"empno":empno}
  })
    .then((res) => {
      //请求成功
      tableData.list = res.data;
      console.log(tableData.list);
      if(res.data)
      ElMessage.success("查看个人信息成功");
    })
    .catch((err) => {
      //请求失败·
      ElMessage.error("查看个人信息失败");
    });
};

onMounted(() => {
  getData();
});
</script>

<template>
  <el-container id="mainView">
    <el-header
      style="
        background-color: #272822;
        color: #e5e5e5;
        line-height: 60px;
        font-size: 27px;
      "
      >查看个人信息</el-header
    >
    <el-footer
      style="
        height: 30px;
        line-height: 30px;
        background-color: #4e5246;
        border-bottom: 1px solid #7a7a7a;
        border-top: 1px solid #7a7a7a;
      "
    >
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"
          ><el-icon><House /></el-icon>首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>查看个人信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%">
      <el-card style="width: 100%; line-height: 55px">
        <span style="color: #e5e5e5; line-height: 20px">
          <el-icon><Discount /></el-icon>
          基础信息 </span
        ><el-divider style="margin-bottom: 20px; margin-top: 0px" />
        <div class="card">
          <p class="left">员工姓名：</p>
          <p class="right">{{ tableData.list.ename }}</p>
          <p class="left">邮箱：</p>
          <p class="right">{{ tableData.list.email }}</p>
          <p class="left">所属部门：</p>
          <p class="right">{{ tableData.list.dname }}</p>
          <p class="left">职位：</p>
          <p class="right">{{ tableData.list.job_name }}</p>
          <p class="left">性别：</p>
          <p class="right" v-if="tableData.list.gender == 1">男</p>
          <p class="right" v-else-if="tableData.list.gender == 0">女</p>
          <p class="left">入职日期：</p>
          <p class="right">{{ tableData.list.start_date }}</p>
          <p class="left">生日：</p>
          <p class="right">{{ tableData.list.birthday }}</p>
          <p class="left">婚姻状态：</p>
          <p class="right" v-if="tableData.list.marriage == 1">已婚</p>
          <p class="right" v-else-if="tableData.list.marriage == 0">未婚</p>
          <p class="left">初次参加工作时间：</p>
          <p class="right">{{ tableData.list.work_date }}</p>
          <img
            class="img"
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          />
        </div>
      </el-card>
      <br />
      <span style="color: #e5e5e5; line-height: 30px">
        <el-icon><Grid /></el-icon>
        部门履历信息
      </span>
      <el-table
        :data="tableData.list.deptHistory"
        stripe="true"
        border
        style="width: 100%"
      >
        <el-table-column prop="" label="员工姓名">
          <template #default>
            {{ tableData.list.ename }}
          </template>
        </el-table-column>
        <el-table-column prop="dname" label="部门名称" />
        <el-table-column prop="start_date" label="开始日期" />
        <el-table-column prop="end_date" label="结束日期" />
      </el-table>

      <br />
      <span style="color: #e5e5e5; line-height: 30px">
        <el-icon><Grid /></el-icon>
        职位履历信息
      </span>
      <el-table
        :data="tableData.list.jobHistory"
        stripe="true"
        border
        style="width: 100%"
      >
        <el-table-column prop="" label="员工姓名">
          <template #default>
            {{ tableData.list.ename }}
          </template>
        </el-table-column>
        <el-table-column prop="job_name" label="职位名称" />
        <el-table-column prop="start_date" label="开始日期" />
        <el-table-column prop="end_date" label="结束日期" />
      </el-table>
      <br />
    </el-main>
  </el-container>
</template>

<style scoped>
#mainView {
  height: 100%;
  width: 100%;
}
.card {
  display: grid;
  grid-template-columns: 150px 150px 6fr 2fr 1fr;
}
.card .left {
  text-align: right;
  grid-column-start: 1;
  grid-column-end: 2;
}
.card .right {
  text-align: left;
  grid-column-start: 2;
  grid-column-end: 3;
}
.card .img {
  width: 200px;
  height: 200px;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 5;
}
</style>
